<template>
  <div class="compile">
    <Navhead labelText="编辑资料" />
    <div class="portrait">
      <img :src="$axios.defaults.baseURL+Database.head_img" alt v-if="Database.head_img" />
      <img src="../../assets/none.jpg" alt v-else />
      <!-- 引入上传文件插件 -->
      <van-uploader :after-read="afterRead" />
    </div>

    <Arrange labelText="昵称" :connectText="Database.nickname" @acrossClick="isNickshow=true" />
    <Arrange labelText="密码" connectText="﹡﹡﹡" @acrossClick="isPassshow=true" />
    <Arrange
      labelText="性别"
      connectText="男"
      v-if="Database.gender==1"
      @acrossClick="isGendershow=true"
    />
    <Arrange labelText="性别" connectText="女" v-else @acrossClick="isGendershow=true" />
    <!-- 收入弹框插件 -->
    <van-dialog
      v-model="isNickshow"
      title="新昵称"
      show-cancel-button
      @confirm="newData({nickname:newNickname})"
    >
      <van-field v-model="newNickname" placeholder="请输入新昵称" />
    </van-dialog>
    <van-dialog
      v-model="isPassshow"
      title="新密码"
      show-cancel-button
      @confirm="newData({password:newPassword})"
    >
      <van-field v-model="newPassword" placeholder="请输入新密码" type="password" />
    </van-dialog>
    <!-- 引入面板性别选择插件 -->
    <van-action-sheet
      v-model="isGendershow"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import Arrange from "@/components/Arrange";
import Navhead from "@/components/Navhead";
export default {
  components: { Arrange, Navhead },
  data() {
    return {
      Database: "",
      isNickshow: false,
      isPassshow: false,
      isGendershow: false,
      newNickname: "",
      newPassword: "",
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 }
      ]
    };
  },
  methods: {
    //封装一个页面重新加载函数,这样可以不用手动刷新页面就可以改变页面更新后的效果,下面使用
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("id"),
        method: "GET"
      }).then(res => {
        if (res.data.message == "获取成功") {
          const { data } = res.data;
          this.Database = data;
        }
      });
    },
    newData(paraMeter) {
      //给一个共同的属性newData与参数paraMeter,这样不用每个daga都this.$axios一次
      this.$axios({
        url: "/user_update/" + localStorage.getItem("id"),
        method: "POST",
        headers: {
          //请求头
          Authorization: "Bearer " + localStorage.getItem("token") //'Authorization'授权意思,'bearer '固定写法,'持有者'的意思,后面要加个空格
        },
        data: paraMeter
      }).then(res => {
        console.log(res);
        this.loadPage(); //这里一定要加this呀,错了几万次,了
      });
    },
    onSelect(item) {
      console.log(item.gender);
      this.newData({ gender: item.gender });
      this.isGendershow = false;
    },
    afterRead(fileObj) {
      // var filehead = { file: fileObj.file };
      var formdata = new FormData();
      formdata.append("file", fileObj.file); //上传文件必须是二进制
      this.$axios({
        url: "/upload", //注意,这里的url和上面的不一样,搞了半天
        method: "POST",
        headers: {
          //请求头
          Authorization: "Bearer " + localStorage.getItem("token") //'Authorization'授权意思,'bearer '固定写法,'持有者'的意思,后面要加个空格
        },
        data: formdata
      }).then(res => {
        console.log(res);
        var { message, data } = res.data;

        this.newData({ head_img: data.url });
      });
    }
  },

  mounted() {
    this.loadPage(); //这里一定要加this呀,错了几万次,了
  }
};
</script>

<style lang="less" scoped>
.compile {
  padding: 7.222vw 4.444vw 7.222vw 5.556vw;

  .portrait {
    text-align: center;
    margin-left: 3.222vw;
    margin-bottom: 4vw;
    img {
      width: 19.444vw;
      height: 19.444vw;
      // object-fit: cover;
      border-radius: 26.111vw;
    }
    .van-uploader {
      position: absolute;
      right: 33.333vw;
      opacity: 0;
    }
  }
}
</style>